<template>
	<view class="mainPage content" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view>
			<view class="flex-container">
				<view class="title">选择出诊费(元)</view>
				<view class="flex-item" :class="index==chengshiNum?'active':''" v-for=" (item,index) in price" :key="index" @click="dianji1(index,item.label)">{{item.label}}</view>
			</view>
			<view class="flex-container">
				<view class="title">自定义出诊费 (元)</view>
				<input class="title" placeholder-style="font-size: 28rpx;" placeholder="请输入自定义出诊费价格" type="digit" @input="input" v-model="register_price" />
			</view>
		</view>
		<view class="box3">
			<button class="but active" @click="determine">保存</button>
			<!-- <button class="active" v-if="status==true&&!imagetextlist.length"  @click="determine">添加</button> -->
			<!-- <button class="active" v-if="status==true&&imagetextlist.length"  @click="determine">修改</button> -->
		</view>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "出诊费设置",
			cost: '',
			checked: true,
			chengshiNum: 100,
			register_price: '',
			datalist: '',
			imagetextlist: '',
			price: [{
				label: '9.00',
				value: 1,
			},
			{
				label: '15.00',
				value: 2,
			},
			{
				label: '20.00',
				value: 3,
			}, {
				label: '29.00',
				value: 4,
			},
			{
				label: '39.00',
				value: 5,
			},
			{
				label: '59.00',
				value: 6,
			}
			],
		};
	},
	onLoad() {
		that = this
		//that.determine()
		that.information()
	},
	methods: {
		// switch打开或者关闭时触发，值为true或者false
		// 即使不监听此事件，this.checked此时也会相应的变成true或者false
		dianji1(index, label) {
			that.chengshiNum = index
			that.register_price = label
			console.log(index, label, 'this.chengshiNum', that.chengshiNum)
		},
		// 获取预约信息
		information() {
			that.$postAjax1('YuYue_get_yuyue_config', {
			}, function (data) {
				that.informations = data.data.data
				that.register_price = that.informations.price
				console.log(that.informations)
			})
		},
		// 设置出诊费
		determine() {
			that.$postAjax1('YuYue_set_yuyue', {
				type: 2,//设置出诊费
				value: that.register_price
			}, function (data) {
				uni.navigateBack({
				})
				console.log('添加成功')
			})
		}
	}
};
</script>
<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	background: #f6f6f6;
	position: relative;
	.box {
		background: #ffffff;
		height: 150rpx;
		.title {
			display: inline-block;
			float: left;
			padding: 30rpx 50rpx;
			.switch {
				padding: 0 10rpx;
			}
			.text {
				padding: 10rpx;
				color: #8a8a8a;
			}
		}
		.but {
			display: inline-block;
			float: right;
			padding: 50rpx;
		}
	}
	.box2 {
		//position: absolute;
		//bottom: 0;
		margin-top: 30rpx;
		padding: 50rpx 0;
		//height: 800rpx;
		background: #ffffff;
		width: 100%;
		.title1 {
			padding: 10rpx 50rpx 10rpx 50rpx;
		}
		.title2 {
			padding: 15rpx 50rpx;
		}
	}
	.box3 {
		margin-top: 80rpx;
		margin-bottom: 80px;
		.but {
			width: 630rpx;
			height: 92rpx;
			background: #c4c4c6;
			border-radius: 46rpx;
			color: #ffffff;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 92rpx;
		}
		.active {
			background: #ff8f2b;
			box-shadow: 0px 6rpx 8rpx 0px rgba(255, 143, 43, 0.2);
		}
	}
	.flex-container {
		// display: -webkit-flex;
		// display: flex;
		// -webkit-justify-content: flex-end;
		// justify-content: space-around;
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx 40rpx;
		margin-top: 8rpx;
		.title {
			padding: 10rpx 10rpx 14rpx 10rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #323232;
			line-height: 44rpx;
			.title1 {
				display: inline-block;
				width: 80%;
				float: left;
				line-height: 60rpx;
			}
			.title2 {
				display: inline-block;
				width: 20%;
				float: right;
				text-align: center;
				padding: 6rpx 10rpx;
				background: #8a8a8a;
				background: linear-gradient(223deg, #ff9331 0%, #fe7600 100%);
				border-radius: 4rpx;
				color: #ffffff;
			}
		}
		.flex-item {
			width: 30%;
			margin: 10rpx 10rpx;
			color: #adadad;
			display: inline-block;
			padding: 15rpx 30rpx;
			text-align: center;
			clear: both;
			border-radius: 12rpx;
			border: 2rpx solid #dcdcdc;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #909090;
		}
		.active {
			background: linear-gradient(270deg, #ffc347 0%, #ff9331 100%);
			color: #ffffff;
		}
	}
}
</style>
